import React from "react";
import { useState, useEffect } from "react";
import { useLocation } from "react-router-dom";
import { getIssueByPage } from "@/api/issue";
import { getBookByPage } from "@/api/book";
import { IssuesItem, Recommend, ScoreRank, PageHeader, AddIssueBtn, BooksItem } from "@/components";
import styles from "./SearchPage.module.css";
import { Empty, Pagination } from "antd";
export default function SearchPage() {
  const location = useLocation();
  const [pageInfo, setPageInfo] = useState({
    current: 1,
    pageSize: 15,
    total: 0,
  });
  const [searchResult, setSearchResult] = useState([]);
  const { value, searchOption } = location.state;

  useEffect(() => {
    async function fetchData() {
      let searchParams = {
        current: pageInfo.current,
        pageSize: pageInfo.pageSize,
        issueStatus: true,
      };
      switch (searchOption) {
        case "issue":
          searchParams.issueTitle = value;
          const { data } = await getIssueByPage(searchParams);
          // 更新搜索结果
          setSearchResult(data.data);
          // 更新分页信息
          setPageInfo({
            current: data.currentPage,
            pageSize: data.eachPage,
            total: data.count,
          });
          break;
        case "book":
          searchParams.bookTitle = value;
          const { data: res } = await getBookByPage(searchParams);
          setSearchResult(res.data);
          setPageInfo({
            current: res.currentPage,
            pageSize: res.eachPage,
            total: res.count,
          });
      }
    }
    if (location.state) {
      fetchData();
    }
  }, [pageInfo.current, pageInfo.pageSize, location.state]);

  const handlePageChange = (current, pageSize) => {
    setPageInfo({
      current,
      pageSize,
    });
  };

  let serachContainer = null;
  if (searchOption === "issue") {
    serachContainer = searchResult.map((item) => {
      return <IssuesItem issueInfo={item} key={item._id} />;
    });
  } else if (searchOption === "book") {
    serachContainer = searchResult.map((item) => {
      return <BooksItem bookInfo={item} key={item._id} />;
    });
  }

  return (
    <>
      <PageHeader title={"搜索结果"} />
      <div className={styles.serachPageContainer}>
        <div className={styles.leftSide}>
          {searchResult.length > 0 ? (
            <>
              {serachContainer}
              <Pagination
                style={{ display: "flex", justifyContent: "center", margin: "30px" }}
                showQuickJumper
                {...pageInfo}
                onChange={handlePageChange}
              />
            </>
          ) : (
            <Empty />
          )}
        </div>
        <div className={styles.rightSide}>
          <AddIssueBtn />
          <div style={{ marginBottom: "30px" }}>
            <Recommend />
          </div>
          <div style={{ marginBottom: "30px" }}>
            <ScoreRank />
          </div>
        </div>
      </div>
    </>
  );
}
